<template>
  <view class="exam-card" @click="goExam">
    <view class="exam-list-area">
      <view class="top">
        <view class="title">{{myInfo.name}}</view>
        <view v-if="myInfo.state==='wait'" class="time">30分钟</view>
      </view>
      <view v-if="myInfo.state==='wait'" class="bottom" >
        <text>{{myInfo.start_time | timeFormat('YYYY-MM-DD HH:mm')}}</text><text style="margin: 0 20rpx;">至</text> <text>{{myInfo.end_time | timeFormat('YYYY-MM-DD HH:mm')}}</text>
      </view>
     <view class="copy-bottom" v-if="myInfo.state!=='wait'">
        <view class="left">
			
          <view>{{myInfo.time?myInfo.time:myInfo.end_time | timeFormat('YYYY-MM-DD HH:mm')}}</view>
          <view> 用时 <text v-if="Math.trunc(myInfo.use_time/60) !== 0">{{Math.trunc(myInfo.use_time/60)}}分</text> {{myInfo.use_time%60}}秒</view>
        </view>
        <view class="line"></view>
        <view class="right">
          <view class="res">
            <text v-if="myInfo.state==='yes'" class="result">合格</text>
			<text v-if="myInfo.state==='no'" class="no-result">不合格</text>
            <text>结果</text>
          </view>
          <view class="res">
            <text class="text" style="color: #000623; margin-top: -6rpx;">{{myInfo.score}}</text>
            <text>得分</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "XbdExamCard",
  props: {
    myInfo: '',
  },
  data() {
    return {};
  },
  methods: {
    goExam() {
      this.$emit("click");
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/static/common.scss";
.exam-card{
}
.exam-list {
  width: 100%;
  &-area {
    width: 100%;
    // height: 120rpx;
    border-bottom: 3rpx dashed rgb(204, 199, 199);
    .top {
      margin-bottom: 30rpx;
      .title {
        width: 500rpx;
        @include ellipsis;
        font-size: 30rpx;
        color: #000623;
      }
      .time {
        font-size: 26rpx;
        color: #2e73fc;
      }
      @include flexBetween;
    }
    .bottom {
      color: #a0a7b8;
      font-size: 26rpx;
    }
    .copy-bottom {
      display: flex;
      justify-content: space-between;
      height: 85rpx;
      align-items: center;
      .left {
        flex: 0.5;
        height: 100%;
        font-size: 26rpx;
        color: #a0a7b8;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
		// align-items: center;
      }
      .line {
        width: 2rpx;
        height: 72rpx;
        background-color: #f5f7fb;
      }
      .right {
        flex: 0.5;
        height: 100%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        .res {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          text {
            display: block;
          }
		  .no-result {
		    font-size: 30rpx;
		    color: #FC4F4F;
		  }
          .result {
            font-size: 30rpx;
            color: #48bc7c;
          }
          & text:last-child {
            color: #a0a7b8;
            font-size: 26rpx;
          }
          .text {
            font-size: 40rpx;
            font-weight: 600;
          }
        }
      }
    }
  }
  &-area:last-child {
    border: none;
    margin: 0;
  }
}
</style>